<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="/static/client/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="/static/client/css/main.css">
    <!--å è½½meta IEå¼å®¹æä»¶-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<jsp:include page="comonent/top.jsp"/>

<div class="album-content w1000" id="layer-photos-demo" class="layer-photos-demo">
    <div class="img-info">
        <img src="${page.dataList[fn:length(page.dataList)-1].cover}" alt="">
        <div class="title">
            <p class="data">${page.dataList[fn:length(page.dataList)-1].dataDiff}<span>
                <fmt:formatDate value="${page.dataList[fn:length(page.dataList)-1].createtime}" pattern="yyyy-MM-dd"></fmt:formatDate></span></p>
            <p class="text">${page.dataList[fn:length(page.dataList)-1].title}</p>
        </div>
    </div>
    <div class="img-list">
        <div class="layui-fluid" style="padding:0">
            <div class="layui-row layui-col-space30 space">

                <c:forEach items="${page.dataList}" var="a">

                    <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
                        <div class="item">
                            <span style="display: none">${a.albumJson}</span>
                            <img src="${a.cover}" width="200px" height="200px">
                            <div class="cont-text">
                                <div class="data"><fmt:formatDate value="${a.createtime}"
                                                                  pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></div>
                                <p class="address"><i
                                        class="layui-icon layui-icon-location"></i><span>${a.address}</span></p>
                                <p class="briefly">${a.title}</p>
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
        <div id="demo"></div>
    </div>
</div>


<jsp:include page="comonent/foot.jsp"/>
<script type="text/javascript" src="/static/client/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        base: '/static/client/js/util/'
    }).use(['element', 'laypage', 'form', 'layer', 'menu', 'jquery'], function () {
        element = layui.element, laypage = layui.laypage, form = layui.form, layer = layui.layer, menu = layui.menu;
        let $ = layui.jquery;
        //执行一个laypage实例
        let page = laypage.render({
            curr: $("#pageIndex").val(),
            limit: 5,
            elem: "demo"//注意，这里的 test1 是 ID，不用加 # 号
            , count: $("#count").val() //数据总数，从服务端得到
            , jump: function (obj, first) {
                //首次不执行
                if (!first) {
                    let path = location.href;
                    if (path.indexOf("?") != -1) {
                        path = path.substring(0, path.indexOf("?"))
                    }
                    window.location = path + "?pageIndex=" + obj.curr;
                }
            }
        });

        $("#layer-photos-demo img").click(function () {
            let json = $.parseJSON($(this).prev().text());
            layer.photos({
                photos: json
                , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            });
        });
        menu.init();
    })
</script>
</body>
</html>